<template>
  <div>
    <el-card class="box-card" style="margin-top: 0;">
      <div class="text item">
        <div class="btn-area">
          <el-button type="primary" size="mini" @click="addHandle">新增作业</el-button>
        </div>
        <div class="list-area" v-loading="loading" v-if="tableList.length>0">
          <div class="list-item" v-for="(item,index) in tableList" :key="index">
            <div class="item-header">
              <div class="item-title">作业名称：{{item.workName}}</div>
              <div class="item-btn">
                <el-button size="mini" @click="readHandle(item)">评阅作业</el-button>
                <el-button size="mini" @click="editHandle(item)">编辑作业</el-button>
                <el-button size="mini" @click="removeHandle(item)">删除作业</el-button>
              </div>
            </div>
            <div class="item-content">
              <div class="item-txt" v-html="item.workContext"></div>
              <div class="item-time">
                <div>发布时间：{{item.startTime}}</div>
                <div>截止日期：{{item.endTime}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="list-area" v-else>
          <div class="empty">暂无作业</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {setCampJobId} from "@/utils/auth";
  import {GetJobList, RemoveJob} from "@/api/campSystem/campOper";

  export default {
    name: "JobList",
    props: {
      idFu: [String, Number]
    },
    data() {
      return {
        loading: false,// 表格加载loading
        queryParams:{
          campId: null
        },
        tableList: [], // 表格数据列表
        jobId: null
      };
    },
    created() {
      this.queryParams.campId = this.idFu;
      this.getList();
    },
    methods: {
      // 去评阅作业
      readHandle(data){
        setCampJobId(data.id);
        this.$emit('childHandle', '4');
      },
      // 删除作业
      removeHandle(data){
        console.log(data)
        this.$confirm('是否确认删除该作业?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let obj = {
            campId: data.campId,
            id:data.id,
            workName: data.workName,
          }
          RemoveJob(obj)
            .then(response => {
              console.log(response);
              if (response.code != 200) {
                return this.msgError(response.msg);
              }
              this.msgSuccess(response.msg);
              this.getList();
            })
            .catch(error => {
              console.log(error);
            });
        }).catch(() => {
          this.msgInfo('已取消删除')
        });
      },
      // 去编辑作业
      editHandle(data){
        setCampJobId(data.id);
        this.$emit('childHandle', '3');
      },
      // 去新增作业
      addHandle(){
        this.$emit('childHandle', '2')
      },
      // 获取列表
      getList() {
        this.loading = true;
        GetJobList(this.queryParams)
          .then(response => {
            console.log(response);
            if (response.code != 200) {
              this.loading = false;
              return this.msgError(response.msg);
            }
            this.loading = false;
            this.tableList = response.rows;
          })
          .catch(error => {
            console.log(error);
            this.loading = false;
          });
      },
    },
    watch: {
      idFu(val) {
        this.queryParams.campId = val;
        this.getList();
      },
    }
  }
</script>

<style lang="scss">
  @import "@/assets/styles/card.scss";
  .list-area{
    position: relative;
    min-height: 130px;
    font-size: 14px;
    font-family: PingFang SC;
    .list-item{
      margin-top: 20px;
      padding: 10px 20px;
      border-radius: 8px;
      background-color: #fafafa;
      .item-header{
        height: 40px;
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #cccccc;
        .item-title{
          font-size: 14px;
        }
        .item-btn{}
      }
      .item-content{
        .item-txt{
          padding: 10px 0;
        }
        .item-time{
          height: 50px;
          display: flex;
          flex-flow: row;
          justify-content: left;
          align-items: center;
          >div{
            margin-right: 30px;
          }
        }
      }
    }
    .empty{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
</style>


